<template>
  <vxe-layout-container>
    <vxe-layout-aside :width="320">
      <vxe-tree show-radio :data="treeList" :check-node-key.sync="checkNodeKey" :node-config="{ isHover: true }"
      @node-click="handleTreeNodeClick" @radio-change="handleTreeNodeClick">
        <template #extra="{ node }">
          <vxe-button mode="text" status="default" icon="vxe-icon-add" circle
            @click="handleFolderAdd(node)"></vxe-button>
          <vxe-button mode="text" status="primary" icon="vxe-icon-edit" circle
            @click="handleFolderEdit(node)"></vxe-button>
          <vxe-button mode="text" status="error" icon="vxe-icon-delete" circle
            @click="handleFolderDelete(node)"></vxe-button>
        </template>
      </vxe-tree>
    </vxe-layout-aside>
    <vxe-layout-container vertical>
      <vxe-layout-header class="layout-header">
        <Query :queryConfig="QueryConfig" @QueryEvent="handleQuery"></Query>
      </vxe-layout-header>
      <vxe-layout-body class="layout-body">
        <vxe-grid ref="maingrid" v-bind="GridOptions">
          <template #customButtons>
              <el-upload ref="upload" :action="UploadUrl" :show-file-list="false" :on-success="handleFileUploadSuccess"
              :multiple="true" :before-upload="handleBeforeUpload">
                <el-button slot="trigger" :size="componentSize" type="primary">上传文件</el-button>
              </el-upload>
              <el-button style="margin-left: 15px;" :size="componentSize" type="primary" @click="handleDownload">下载文件</el-button>
          </template>
          <template #operation="{ row }">
            <vxe-button :size="componentSize" mode="text" status="danger" content="删除" @click="handleDelete(row)"
              v-if="btnPromission.delete.buttonCaption" />
          </template>
        </vxe-grid>
      </vxe-layout-body>
      <vxe-layout-footer class="layout-footer">
        <vxe-pager :align="PagerConfig.align" :size="componentSize" :current-page.sync="PagerConfig.currentPage"
          :page-size.sync="PagerConfig.pageSize" :total="PagerConfig.total" @page-change="handlePageChange"></vxe-pager>
      </vxe-layout-footer>
    </vxe-layout-container>
  </vxe-layout-container>
</template>
<style></style>
<script>
import FileCenter from './index.js';
export default FileCenter;
</script>
